<template>
    <div class="common-layout">
        <el-container style="background-color: black;">
            <el-header style="background-color: aqua;height: 100px;">
                <h3>陈医生</h3>
                <span>全科医生 | 南明区慢病管理团队</span><span style="margin-left: 850px;">管理患者人数:88</span>
            </el-header>
            <el-main style="background-color: blue;">
                <div style="height: 110px;width: 990px;background-color:brown;">
                    <div style="float: left;background-color: aqua;height: 110px; width: 240px;">
                        高血压
                    </div>
                    <div
                        style="float: left;margin-left: 10px;height: 110px; width: 240px;background-color: rebeccapurple;">
                        糖尿病
                    </div>
                    <div style="float: left;margin-left: 10px;height: 110px; width: 240px;background-color: aqua;">
                        慢阻肺
                    </div>
                    <div
                        style="float: left;margin-left: 10px;height: 110px; width: 240px;background-color: rebeccapurple;">
                        脑卒中
                    </div>
                </div>
                <div style="width: 305px;height: 640px;background-color:azure;">
                    <div style="background-color: aqua;width: 305px;">待办事项</div>
                    <div>
                        <el-calendar v-model="value" class="custom-calendar" />
                    </div>
                    <div>
                        <el-tag type="primary" round effect="dark">待随访</el-tag> 张晓丽 |男 | 29岁 <a href="#"
                            style=" margin-left: 60px;">随访</a>
                        <br>
                        身份证号:XXXXXXXXXXXX
                    </div>

                </div>
                <div style="width: 650; height: 640;background-color:aqua;">
                    213
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElCalendar } from 'element-plus';
const value = ref(new Date())

</script>

<style scoped>
.custom-calendar {
    --el-calendar-cell-width: 28px;
    --el-calendar-cell-height: 28px;
}

.custom-calendar ::v-deep(.el-calendar-table__row) {
    height: auto;
}

.custom-calendar ::v-deep(.el-calendar-table td) {
    height: var(--el-calendar-cell-height);
    width: var(--el-calendar-cell-width);
    padding: 0;
    min-width: auto;
}

.custom-calendar ::v-deep(.el-calendar-day) {
    min-height: 100%;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>